<template>
  <div>
    <!--    导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>护工管理</el-breadcrumb-item>
      <el-breadcrumb-item>护工列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <div style="float:left">
          <el-input placeholder="请输入姓名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button class="add-btn " type="primary" @click="dialogVisible = true">添加用户</el-button>
        </div>


        <div class="form-horizontal">
          <form class=" upload-block" id="upload">
            <el-upload
                class="upload-demo"
                ref="upload"
                action="http://39.105.175.112:8080/api/v1/excel"
                :limit="1"
                accept='.xlsx'
                :on-success="uploadSuccess"
                :on-error="uploadError">
              <el-button type="success">导入Excel<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-upload>
          </form>
        </div>
      </div>
      <!--展示页-->
      <div class="table-div" style="margin-top: 30px">
        <el-table
            :data="userList"
            stripe
            :height="tableHeight"
            style="width: 100%">
          <el-table-column
              type="index"
              label="#">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="100">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="手机号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="120">
          </el-table-column>
          <el-table-column
              prop="age"
              label="年龄"
              width="120">
          </el-table-column>
          <el-table-column
              prop="jg"
              label="籍贯"
              width="120">
          </el-table-column>
          <el-table-column
              prop="record"
              label="学历"
              width="100">
          </el-table-column>
          <el-table-column
              prop="idcard"
              label="身份证号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="certificateNumber"
              label="证书编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="timeOne"
              label="时间1"
              width="150">
          </el-table-column>
          <el-table-column
              prop="timeOne"
              label="时间2"
              width="150">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" icon="el-icon-edit" @click="editForm(scope.row.id)"></el-button>
              <el-button type="success" size="small" icon="el-icon-download"
                         @click="outExcel(scope.row.id)"></el-button>

              <el-button type="danger" size="small" @click="open(scope.row.id)" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>


        </el-table>
      </div>
      <!--添加弹窗-->
      <!--添加页-->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <el-form label-position="right" label-width="100%" :model="addFrom" :rules="addFromRoles" class="addForm">
          <el-form-item label="姓名" prop="name" label-width="90px">
            <el-input v-model="addFrom.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" label-width="90px">
            <el-input v-model="addFrom.phone"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex" label-width="90px">
            <el-input v-model="addFrom.sex"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="jg" label-width="90px">
            <el-input v-model="addFrom.jg"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="record" label-width="90px">
            <el-input v-model="addFrom.record"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard" label-width="90px">
            <el-input v-model="addFrom.idcard"></el-input>
          </el-form-item>
          <el-form-item label="证书编号" prop="certificateNumber" label-width="90px">
            <el-input v-model="addFrom.certificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="时间1" prop="timeOne" label-width="90px">
            <el-input v-model="addFrom.timeOne"></el-input>
          </el-form-item>
          <el-form-item label="时间2" prop="timeTwo" label-width="90px">
            <el-input v-model="addFrom.timeTwo"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitFrom()">确 定</el-button>
  </span>
      </el-dialog>
      <!--编辑弹窗-->
      <!--修改页-->
      <el-dialog
          title="提示"
          :visible.sync="editDialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form label-position="right" label-width="100%" :model="editFormData" :rules="addFromRoles">
          <el-form-item label="姓名" prop="name" label-width="90px">
            <el-input v-model="editFormData.name">{{ editFormData.name }}}</el-input>

          </el-form-item>
          <el-form-item label="手机号" prop="phone" label-width="90px">
            <el-input v-model="editFormData.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex" label-width="90px">
            <el-input v-model="editFormData.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age" label-width="90px">
            <el-input v-model="editFormData.age"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="jg" label-width="90px">
            <el-input v-model="editFormData.jg"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="record" label-width="90px">
            <el-input v-model="editFormData.record"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard" label-width="90px">
            <el-input v-model="editFormData.idcard"></el-input>
          </el-form-item>
          <el-form-item label="证书编号" prop="certificateNumber" label-width="90px">
            <el-input v-model="editFormData.certificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="时间1" prop="timeOne" label-width="90px">
            <el-input v-model="editFormData.timeOne"></el-input>
          </el-form-item>
          <el-form-item label="时间2" prop="timeTwo" label-width="90px">
            <el-input v-model="editFormData.timeTwo"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmitFrom()">确 定</el-button>
  </span>
      </el-dialog>

    </el-card>


  </div>


</template>
<style lang="less" scoped>
.form-horizontal {
  margin-left: 350px;
}

//.addForm{
//  margin-left: 100px;
//}
.table-div {
  margin-top: 14px;
}

.add-btn {
  margin-left: 10px;
}

.el-input {
  width: 230px;
}
</style>

<script>
export default {
  data() {
    return {
      tableHeight: window.innerHeight - 250,
      userList: [],
      dialogVisible: false,
      editDialogVisible: false,
      addFrom: {
        name: '',
        sex: '',
        age: '',
        jg: '',
        record: '',
        phone: '',
        idcard: '',
        certificateNumber: '',
        timeOne:'',
        timeTwo:''

      },
      editFormData: {
        id: '',
        name: '',
        sex: '',
        age: '',
        jg: '',
        record: '',
        phone: '',
        idcard: '',
        certificateNumber: '',
        timeOne:'',
        timeTwo:''
      },
      addFromRoles: {
        name: [
          {required: true, message: '请输入姓名'}
        ],
        sex: [
          {required: true, message: '请填写性别'}
        ],
        age: [
          {required: true, message: '请输入年龄'}
        ],
        jg: [
          {required: true, message: '请输入地区'}
        ],
        record: [
          {required: true, message: '请输入学历'}
        ],
        phone: [
          {required: true, message: '请输入手机号'}
        ],
        idcard: [
          {required: true, message: '请输入身份证号'}
        ],
        certificateNumber: [
          {required: true, message: '请输入证书编号'}

        ],
        timeOne: [
          {required: true, message: '请输入时间信息'}

        ],
        timeTwo: [
          {required: true, message: '请输入时间信息'}

        ]

      }
    }

  },
  created() {
    this.getList()
  },
  methods: {
    editSubmitFrom() {
      this.$http({
        method: 'post',
        data: this.editFormData,
        url: 'http://39.105.175.112:8080/api/v1/updateuser'
      }).then(res => {
        if (res.data !== '修改成功') {
          this.$message.error(res.data)
        } else {
          this.getList()
          this.$message.success(res.data)
          this.editDialogVisible = false
        }

      })
    },
    editForm: function (id) {
      this.editDialogVisible = true
      console.log(id)
      this.$http({
        method: 'post',
        data: {id: id},
        url: 'http://39.105.175.112:8080/api/v1/findbyid'
      }).then(res => {
        this.editFormData = res.data.shift();
      })


    },
    //导出Word证书
    outExcel(id) {
      this.$http({
        method: 'post',
        data: {id: id},
        url: 'http://39.105.175.112:8080/api/v1/word'
      }).then((res) => {

        setTimeout(function () {
          // 创建a标签
          const link = document.createElement('a')
          link.setAttribute('href', res.data)
          link.click()
          document.body.removeChild(link)
        }, 5);

      })

    },
    //文件上传事件
    uploadSuccess() {
      this.removeList();
      this.getList()
      this.$message({  //弹窗
        message: 'Excel导入成功',
        type: 'success',
        center: true,
        duration: 2500
      });


    },
    uploadError() {
      this.$message({  //弹窗
        type: 'error',
        message: 'Excel导入失败！',
        center: true,
        duration: 2500
      });
      this.$refs.upload.clearFiles(); //去掉文件列表
    },
    removeList() {
      let _this = this
      setTimeout(function () {
        _this.$refs.upload.clearFiles(); //去掉文件列表
      }, 1000)
    },
    submitFrom() {

      this.$http({
        method: 'post',
        url: 'http://39.105.175.112:8080/api/v1/adduser',
        data: this.addFrom
      }).then(res => {
        // eslint-disable-next-line no-empty
        if (res.data !== '添加成功') {
          this.$message({
            type: 'error',
            message: res.data
          });
        } else {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: res.data
          });
          this.getList()
        }


      })

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {
          });
    },
    open(id) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'post',
          data: {
            id: id
          },

          url: 'http://39.105.175.112:8080/api/v1/deleteuser'
        }).then((response => {
          this.$message({
            type: 'success',
            message: response.data
          });
          this.getList()
        }))


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    getList() {
      this.$http({
        method: 'post',
        url: 'http://39.105.175.112:8080/api/v1/finduser'
      }).then((response) => {
        this.userList = response.data
      })

    }

  }


}
</script>
